<template>
    <div>
        <avue-crud :data="crudData"
                   :option="crudOption"
                   :page.sync="page"
                   :table-loading="tableLoading"
                   @on-load="listTaskHis">
            <template slot-scope="scope" slot="taskAssigneeHisList">
                <div class="menu-title"
                     v-if="scope.row.taskAssigneeHisList != null && scope.row.taskAssigneeHisList.length != 0">
                    <el-button size="mini"
                               type="warning"
                               @click.stop="taskAssigneeHisView(scope.row)">转办历史
                    </el-button>
                </div>
                <div v-else>
                    <p>无</p>
                </div>
            </template>
            <template slot-scope="scope" slot="commentFileIdList">
                <file-download v-if="scope.row.commentFileIdList != null && scope.row.commentFileIdList.length > 0"
                               v-for="(fileId,index) in scope.row.commentFileIdList"
                               :key="index"
                               :file-id="fileId">
                </file-download>
            </template>
            <template slot-scope="scope" slot="assigneeNickname">
                <div v-if="scope.row.assigneeNickname != null && scope.row.assigneeNickname.split(',').length > 0"
                     style="display: flex;justify-content: flex-start;">
                        <span :style="index == 1?'padding-left: 10px':''"
                              v-for="(nickname,index) in scope.row.assigneeNickname.split(',')">
                            <span v-if="index == 0">{{nickname}}</span>
                            <el-tooltip v-if="index == 1" effect="dark"
                                        :content="getAssigneeNicknames(scope.row.assigneeNickname)" placement="top">
                              <el-tag>更多</el-tag>
                            </el-tooltip>
                        </span>
                </div>
            </template>
        </avue-crud>
        <assign-history :visible="assignHisVisible" :taskAssigneeHisList="taskAssigneeHisList"
                        @cancelAssignHis="cancelAssignHis"></assign-history>
    </div>
</template>

<script>
    import {pageTaskHis} from "@/api/activiti/monitor";
    import fileDownload from "@/components/file/download"

    export default {
        name: "processHandleHistory",
        components: {
            fileDownload
        },
        data() {
            return {
                crudData: [],
                crudOption: {
                    page: true,
                    menu: false,
                    addBtn: false,
                    editBtn: false,
                    addRowBtn: false,
                    indexLabel: "序号",
                    index: true,
                    indexWidth: 70,
                    cellBtn: false,
                    delBtn: false,
                    columnBtn: false,
                    refreshBtn: false,
                    filterBtn: false,
                    searchBtn: false,
                    keyId: "taskId",
                    rowKey: "taskId",
                    defaultExpandAll: true,
                    column: [
                        {
                            label: "环节",
                            width: 150,
                            prop: "taskName",
                        },
                        {
                            label: "用户",
                            width: 150,
                            prop: "assigneeNickname",
                            slot: true,
                        },
                        {
                            label: "结果",
                            prop: "opinion",
                        },
                        {
                            label: "操作时间",
                            prop: "date",
                            width: 165
                        },
                        {
                            label: "附件",
                            prop: "commentFileIdList",
                            width: 120,
                            slot: true,
                        },
                        {
                            label: "转办历史",
                            prop: "taskAssigneeHisList",
                            width: 120,
                            slot: true,
                        }
                    ]
                },
                page: {
                    total: 0,
                    currentPage: 1,
                    pageSize: 20 // 每页显示多少条
                },
                params: {},
                tableLoading: false,
                assignHisVisible: false,
                taskAssigneeHisList: []
            }
        },
        props: {
            processId: {
                type: String
            },
            taskId: {
                type: String
            },
            businessKey: {
                type: [String, Number]
            },
            processKey: {
                type: String
            },
            visible: {
                type: Boolean,
                default: true
            }
        },
        created() {

        },
        watch: {
            processId() {
                if (this.processId != null) {
                    this.listTaskHis(this.page);
                }
            },
            taskId() {
                if (this.taskId != null) {
                    this.listTaskHis(this.page);
                }
            },
            businessKey() {
                if (this.businessKey != null && this.processKey != null) {
                    this.listTaskHis(this.page);
                }
            },
            processKey() {
                if (this.businessKey != null && this.processKey != null) {
                    this.listTaskHis(this.page);
                }
            },
            visible() {
                if (this.visible) {
                    this.listTaskHis();
                }
            }
        },
        methods: {
            // 获取历史办理情况
            listTaskHis(page) {
                if (this.processId == null && this.taskId == null && (this.businessKey == null || this.processKey == null)) {
                    return false;
                }
                if (this.tableLoading) {
                    return;
                }
                this.tableLoading = true;
                let query = {
                    processId: this.processId,
                    taskId: this.taskId,
                    businessKey: this.businessKey,
                    processKey: this.processKey
                };
                let params = Object.assign({
                    current: this.page.currentPage,
                    size: this.page.pageSize,
                }, query);
                pageTaskHis(params).then(response => {
                    let data = response.data.data.records;
                    if (data != null && Array.isArray(data) && data.length > 0) {
                        for (let task of data) {
                            if (task != null && task.jointlyHandleProcessList != null && Array.isArray(task.jointlyHandleProcessList) && task.jointlyHandleProcessList.length > 0) {
                                let children = [];
                                for (let process of task.jointlyHandleProcessList) {
                                    children.push({
                                        taskId: task.taskId + '#' + process.processId,
                                        assigneeNickname: "[会办部门] " + process.variables["JOINTLY_HANDLE_DEPT_NAME"],
                                        taskName: "[" + process.processName + "] " + this.getProcessStateDescription(process.state),
                                        opinion: "请在“会办流程”查看",
                                        date: process.startTime,
                                        taskAssigneeHisList: null
                                    });
                                }
                                task.children = children;
                            }
                        }
                    }
                    this.crudData = data;
                    this.page.total = response.data.data.total;
                }).finally(() => {
                    this.tableLoading = false
                });
            },
            getProcessStateDescription(state) {
                let processStateDic = {
                    '0': '进行中',
                    '1': '已结束',
                    '2': '缺少任务',//'流程未结束，但没有正在办理的任务',
                    '3': '缺少办理人',//'当前任务没有办理人或候选人',
                }
                return processStateDic[state];
            },
            taskAssigneeHisView(row) {
                this.assignHisVisible = true;
                this.taskAssigneeHisList = row.taskAssigneeHisList
            },
            cancelAssignHis() {
                this.assignHisVisible = false;
            },
            getAssigneeNicknames(nicknameStr) {
                let nicknames = '[候选人] ';
                let nicknameArr = nicknameStr.split(',')
                if (nicknameArr.length > 0) {
                    for (let i = 0; i < nicknameArr.length; i++) {
                        let nickname = nicknameArr[i];
                        if (nickname != '' && i < nicknameArr.length - 1) {
                            nickname += "，"
                        }
                        nicknames += nickname;
                    }
                }
                return nicknames;
            }
        }
    }
</script>

<style scoped>

</style>
